<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import axios from 'axios';
// 导入图标
import * as aecharts from 'echarts'
// 图表数据
const DataChart = ref([])
const pieChart = ref()
// 初始化图表
const init = async () => {
    // 获取数据
    // 转成异步，先拿到数据再渲染
    await axios.get('https://c4156a34-94b2-4302-969f-e96f6277625a.bspapp.com/pie').then(res => {
        DataChart.value = res.data
    })
    // 通过dom，初始化echarts图表  获取ref虚拟化dom
    let myChart = aecharts.init(pieChart.value)
    // 数据源
    var option = {
        // 标题
        title: {
            text: '库存剩余',//文本
            x: 'center', //文本居中

        },
        // 提示框
        tooltip: {
            // 触发方式 -- 触碰
            trigger: 'item'
        },
        // 图例
        legend: {
            show: true,
            // 位置
            top: '10%',
            left: 'center',
        },
        // 数据
        series: [
            {
                name: '库存',
                // 图形 类别  饼状图
                type: 'pie',
                radius: ['40%', '70%'],  //落空 中间空
                // 样式
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWeight: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                // 显示再环形的中央
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: DataChart.value
            },
        ]
    };
    // 给予数据源
    myChart.setOption(option)
}
onMounted(() => {
    init()
})

</script>
<template>
    <!-- 图表 -->
    <div class='pieChart' ref="pieChart"></div>
</template>
<style lang='less' scoped>
.pieChart {
    width: 100%;
    height: 400px;
}
</style>
<!-- pieChart -->